<template>
  <div class="box">
    <div class="left-container">
      <div class="tabs-group">
        <div
          class="tabs-item"
          :class="{ active: tabsCurrent == index }"
          v-for="(item, index) in tabsList"
          @click="tabsClick(index)"
        >
          {{ item.label }}
        </div>
      </div>

      <!-- <left-component
        ref="leftContent"
        :is_ctdd_show="true"
        :tabs-list="tabsList"
        @tabs-click="tabsClick"
        @query-date="queryDate"
      /> -->
        <left-component-new
          v-if="tabsCurrent == 0"
          :is_ctdd_show="true"
          
          @queryDate="queryDate"
        >
      </left-component-new>


      <right-component
        v-if="tabsCurrent == 1"
        ref="rightContent"
      ></right-component>

    </div>
    <center-component
      ref="centerContent"
    ></center-component>
   
    <map-type-control class="fixed right-30px bottom-30px z-100" />
  </div>
</template>

<script>
  import { defineComponent, ref, reactive, toRefs } from 'vue'
  // import leftComponent from '../tomae/components/searchTabs.vue'
  import leftComponentNew from './components/leftComponentNew.vue'
  import rightComponent from './components/rightComponent.vue'
  import centerComponent from './components/centerComponent.vue'
  import MapTypeControl from '@/components/MapTypeControl/index.vue';

  export default defineComponent({
    components: {
      rightComponent,
      // leftComponent,
      leftComponentNew,
      centerComponent,
      MapTypeControl,
    },
    setup() {
      const state = reactive({
        leftContent: null,
        rightContent: null,
        centerContent: null,
        tabsCurrent: 0,
        tabsList: [
          {
            label: '道路拥堵排行',
          },
          {
            label: '路段定期分析',
          },
        ],
      })
      // 2023/6/25 新增
      const tabsClick = (index) => {
        state.tabsCurrent = index;   
        // console.log("item",item);
        // state.centerContent.getData(item)
      }
      const queryDate = (item) => {
        // console.log("item====>",item);
        state.centerContent.getData(item)
      }
      return {
        ...toRefs(state),
        tabsClick,
        queryDate,
      }
    },
  })
</script>

<style lang="less" scoped>
.left-container {
  position: absolute;
  z-index: 4;
  left: 20px;
  top: 4%;
  background-color: rgba(0, 0, 0, 0.8);
  padding: 1vw;
  height: 94%;
  width: 500px;
  .tabs-group {
    display: flex;
    .tabs-item {
      width: auto;
      padding: 0 10px;
      height: 2.2395vw;
      line-height: 2.2395vw;
      background: rgba(255, 255, 255, 0);
      border: 1px solid #aeb4ba;
      box-shadow: 0px 5px 0px 0px rgba(224, 238, 253, 0.3);
      border-radius: 8px 0px 8px 0px;
      color: #ffffff;
      margin-right: 1vw;
      text-align: center;
      cursor: pointer;
    }
    .tabs-item.active {
      border: 1px solid #037bff;
      background: #037bff;
    }
  }
}
  // .report-box {
  //   background-size: 100% 100%;
  //   position: absolute;
  //   left: 0;
  //   top: 0;
  //   z-index: 99;
  //   width: 100%;
  //   height: 100%;
  //   overflow: hidden;
  // }
  // .search-box {
  //   margin-top: 1%;
  //   display: flex;
  //   align-items: center;
  // }
  // :deep .el-input__wrapper {
  //   background: transparent !important;
  //   color: white;
  // }
  // :deep .el-input__wrapper {
  //   background-color: #ffffff00;
  //   box-shadow: 0px 0px 0px;
  // }
  // :deep .el-select {
  //   --el-select-border-color-hover: none;
  //   --el-select-input-focus-border-color: none;
  // }
  // :deep .ant-picker-cell-disabled {
  //   color: rgb(173, 173, 173);
  //   background-color: #bebebe15;
  // }
  // :deep .ant-select:not(.ant-select-customize-input) .ant-select-selector {
  //   background-color: #ffffff00;
  //   border-color: #ffffff00;
  //   border: none;
  // }
  // :deep .ant-select-selection-item {
  //   color: white;
  // }
</style>
